<template>
    <div class="sprea-n">
        <svg class="icon" :style="propColor" aria-hidden="true">
            <use :xlink:href="icon"></use>
        </svg>
        <div class="spre-m">
            <p class="p1">{{text}}</p>
        </div>
        <svg class="icon fill9" aria-hidden="true">
            <use xlink:href="#icon-chevronright"></use>
        </svg>
    </div>
</template>
<div>
</div>
<script>
    export default {
        /**
         * 推广底部一条一条的按钮
         */
        name: "spreaNav",
        props: {
            icon: {
                //图标名字
                type: String
            },
            color: {
                //图标颜色
                type: String,
                default: '#BF2071'
            },
            text: {
                // 文本
                type: String,
                default: '未创建栏目'
            }
        },
        data() {
            return {
                propColor: 'fill:' + this.color
            };
        },
        created() {
        },
        methods: {},

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .sprea-n {
        width 100vw
        height vw(45)
        background white
        padding 0 cellPadding
        flex-x()
        box-sizing border-box
        .spre-m {
            flex 1
            flex-x(flex-start)
            margin 0 cellPadding
            height vw(45)
            border-bottom 1px solid gray5
        }
        .fill9 {
            width vw(12)
        }
    }
</style>